import React from 'react'
// ===================================================================== Temp
// import Select from '@antd/form/select'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import Delete from '#cpt/temp/Delete'
// ===================================================================== Declare
const { $Lazy, $fn, $http } = window
// ===================================================================== Lazy
// const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const Modal 			= $Lazy.state(()=>import('@antd/modal'))
// const Input 			= $Lazy.load(()=>import('@antd/form/input'))
const Button 			= $Lazy.load(()=>import('@antd/button'))
// const DatePicker 		= $Lazy.load(()=>import('@antd/form/datePicker'))
// const SplitDom			= $Lazy.hook(()=>import('../cpt/split-dom'))
// const FoldItem 			= $Lazy.load(()=>import('../cpt/fold-item'))
const GroupTable 		= $Lazy.state(()=>import('./group-cpt/group-table'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		selectedKeys: [],
		selectedRows: [],
		formData : [
			{ label: '测试组',  		name: 'name', 				half: true, required: true },
			{ label: '排序',  		name: 'sort', 				half: true, required: true },
			{ label: '', 			name: 'test_ids',			full: true, type: 'cpt', component: () => <GroupTable ref={ref => this.groupTableRef = ref} /> }
		],
		groupData: [],
		isSelected: true,
		dataLen: 1
	}
	
	open = () => {
		this.fetch()
		this.modalRef.open()
	}
	
	componentDidMount() {
	}
	
	fetch = () => $fn.fetch.call(this,'qc-group/index')
	
	// 表单
	cols = [
		{ title: '测试组',			dataIndex: 'name', 			width:220 },
	]
	
	btns = () => {
		const { selectedKeys } = this.state
		return [
			{label: '添加', onClick: () => this.modal?.open({ formRef:this.formRef })},
			{label: '编辑', onClick: () => {
				this.setState({ids: {uuid: selectedKeys[0]}})
				$http.submit(null, 'qc-group/info', { param: {uuid: selectedKeys[0] } }).then(data => {
					this.formRef?.setValue(data)
					data.test.length && this.groupTableRef.refs.ref.setState({data: data.test})
					this.modal?.open({ formRef:this.formRef })
				})
			}, disabled: !selectedKeys.length},
			Delete.call(this, 'qc-group/del', { param: {uuid: selectedKeys[0]}, isKeys: 1 })
		]
	}
	
	render(){
		return <>
			<Modal
				title	= '测试组'
				width 	= {550}
				height  = {400}
				noOk
				noText 	= '关闭'
				onRef	= { ref => this.modalRef = ref }
				isFullScroll
				onOk	= { () => {
					this.thisRef.sideRef.refs.ref.fetch()
					this.thisRef.sideRef.refs.ref.update()
				} }
			>
				<div className='h fv'>
					<div className='ex fx pt5'>
						<div className='ex fx' style={{marginLeft: -10}}>
							{ Table.call(this, { type:1 }) }
						</div>
						<div className='fv'>
							{
								this.btns().map((v,i)=> <Button key={ i } width='80px' ghost className='mb10' {...v} />)
							}
						</div>
					</div>
				</div>
			</Modal>
			{/* 添加、编辑 */}
			{ AddEditModal.call(this,{ labelWidth:'s5', width:1100, mb:10, api: 'qc-group/add', editApi: 'qc-group/edit', close: () => this.groupTableRef.refs.ref.setState({data: []}), getSubmit: param => {
				const data = this.groupTableRef.refs.ref.state.data
				const test_ids = data.map(v => v.uuid)
				if(data.length){
					return {test_ids}
				}else{
					return {}
				}
			} }) }
		</>
	}
}

export default Index